<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>微聚商城管理</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <style>
    @font-face {
      font-family: FontAwesome;
      font-style: normal;
      font-display: auto;
      src: url(fa-solid-900.woff2) format('woff2');
    }

    .layui-nav a::before {
      content: attr(data-icon);
      font-family: FontAwesome !important;
      font-size: 1.2em;
      padding-right: 0.5rem;
      width: 31px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }

    .layui-nav svg {
      padding-right: 0.5rem;
      width: 31px;
      margin-right: 0.5rem;
      display: inline-flex;
    }

    iframe {
      border: none;
      height: 100%;
    }

    #monitor {
      position: fixed;
      display: flex;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      height: calc(100vh - 10vh);
      width: 380px;
      background-color: #262626;
    }

    #monitor>div {
      flex-grow: 1;
    }
  </style>
</head>

<body>
  <div class="layui-layout layui-layout-admin">


    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item"><a href="javascript:" data-icon="">商品管理</a></li>
          <li class="layui-nav-item"><a href="javascript:" data-icon="">分类管理</a></li>
          <li class="layui-nav-item"><a href="javascript:" data-icon="">库存管理</a></li>
        </ul>
      </div>
    </div>

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px 400px 50px 15px;">
        <div id="monitor">
          <div id="monitor_up">
            <button onclick="refreshFrame();">refresh</button>
          </div>
          <iframe title="微聚商城" src="mindex.html" id="page"></iframe>
          <div id="monitor_down"></div>
        </div>

        <table id="data-table" class="layui-table" lay-filter="goods">

        </table>

      </div>
    </div>

    <div class="layui-footer">
      ©微光网络工作室
    </div>
  </div>
  <script src="./layui/layui.js"></script>
  <script>
    function refreshFrame() {
      document.getElementsByTagName('iframe')[0].contentWindow.location.reload(true);
    }

    //JS 
    layui.use(['element', 'layer', 'util'], function () {
      var element = layui.element
        , table = layui.table
        , layer = layui.layer
        , util = layui.util
        , $ = layui.$;

      //头部事件
      // util.event('lay-header-event', {
      //   //左侧菜单事件
      //   menuLeft: function (othis) {
      //     layer.msg('展开左侧菜单的操作', { icon: 0 });
      //   }
      //   , menuRight: function () {
      //     layer.open({
      //       type: 1
      //       , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
      //       , area: ['260px', '100%']
      //       , offset: 'rt' //右上角
      //       , anim: 5
      //       , shadeClose: true
      //     });
      //   }
      // });
      table.render({
        elem: '#data-table' //指定原始表格元素选择器（推荐id选择器）
        // , height: 315 //容器高度
        , cols: [[
          { field: '0', width: 80, sort: true }
          , { field: '2', width: 200, sort: true, edit: 'text', minWidth: 200 }
          , { field: '3', edit: 'number', width: 80 }
          , { field: '4', width: 80, edit: 'text' }
          , { field: '1', edit: 'text' }
        ]] //设置表头
        , url: './goodList.json'
        , parseData: function (res) { //res 即为原始返回的数据
          return {
            "code": 0, //解析接口状态
            "msg": '', //解析提示文本
            "count": res.length, //解析数据长度
            "data": res //解析数据列表
          };
        }
      });
      table.on('edit(goods)', function (obj) {
        const value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
        layer.msg('[ID: ' + data[0] + '] ' + field + ' 字段更改值为：' + util.escape(value));
      });
    });
  </script>
</body>

</html>